<template>
<view :class="bg" :style="gridItem"><slot></slot></view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  border?: boolean;
  bg?: string;
  color?: string;
  height?: number;
  center?: boolean;
  lCenter?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  color: '#010101',
  height: 120,
})

const gridItem = computed(() => {
  let grid = `color:${props.color};height: ${props.height*2}rpx;text-align:${props.center?'center':''};padding: 5rpx;line-height:${props.lCenter? props.height*2: 0}rpx;`
  if (props.border) {
    grid = `${grid}border: ${props.color} solid 1px;`
  }
  return grid
})
</script>